<template>
  <div class="detail-container">
    <commonForm :form-info="formInfo" />
    <a-radio-group v-model="activeRadio" type="button" class="radio-ara">
      <a-radio value="1">订单明细</a-radio>
      <!-- <a-radio value="2">付款节点</a-radio> -->
      <a-radio value="3">订单附件</a-radio>
      <a-radio value="4">订单正文</a-radio>
    </a-radio-group>
    <div class="model-container">
      <!-- 订单明细 -->
      <detail-table
        v-if="activeRadio === '1' && formInfo.id"
        :form-info="formInfo"
        :edit-flag="false"
      />
      <!-- 付款节点 -->
      <pay-node-table v-if="activeRadio === '2'" />
      <!-- 订单附件 -->
      <div v-if="activeRadio === '3'" class="file-container">
        <fileViewList :file-list="fileList" />
      </div>
      <!-- 订单正文 -->
      <div v-if="activeRadio === '4'" class="file-text-container">
        <a-button style="margin-top: 20px" @click="readDocHandle"
          >查看正文</a-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted } from 'vue';
  import {
    getPmsOrderInfo,
    getPmsOrderFileList,
  } from '@/api/purchase-order/purchaseOrderPreparation';
  import ntko from '@/common/service/ntko/index';
  import { info } from '@/common/utils/modal-promise';
  import commonForm from '../add/com-form.vue';
  import detailTable from '../add/detail-table.vue';
  import payNodeTable from '../add/pay-node-table.vue';
  import fileViewList from '../file-view-list.vue';

  const props = defineProps({
    row: {
      type: Object,
      default: null,
    },
  });
  const formInfo = ref({
    id: '',
  });
  const fileList = ref([]);

  const activeRadio = ref('1');
  const docUrl = ref('/ntko/doc/a.docx');

  if (import.meta.env.MODE === 'development') {
    docUrl.value =
      'http://procurement.internal.avicnet.cn:32101/ntko/doc/a.docx';
  }

  const docId = ref('');
  const readDocHandle = async () => {
    docId.value = await ntko.readDoc(docUrl.value);
  };
  // 监听文档保存成功了
  ntko.on('save', (res) => {
    info({
      title: '页面保存成功',
      content: res.data,
    });
  });

  // 监听文档保存成功了
  ntko.on('close', () => {
    info({
      title: '页面关闭了',
      content: '编辑器关闭了',
    });
  });
  onMounted(async () => {
    console.log('', props);
    const res: any = await getPmsOrderInfo(props.row.id);
    if (res.code === 200) {
      formInfo.value = res.data;
    }
    const fileres: any = await getPmsOrderFileList({
      pmsOrderId: formInfo.value.id,
    });
    if (fileres.code === 200) {
      fileList.value = fileres.data;
    }
  });
</script>

<style lang="less" scoped>
  .radio-ara {
    margin-top: 16px;
    background-color: #e4e7ed !important;

    :deep(.arco-radio-checked) {
      color: #1e2228 !important;
    }
  }

  .file-container {
    margin-top: 16px;
  }

  :deep(.header-con) {
    display: none;
  }
</style>
